<template>
  <div>
    <div class="first_title">基础信息</div>
    <div class="cpninfo">
      <div class="infocontent_line">
        <el-form-item label="商户简称" prop="mngName">
          <el-input v-model="Cpnform.mngName"></el-input>
        </el-form-item>
        <el-form-item label="联系人手机号(客户电话)" prop="mngLnkPhn">
          <el-input type="number" v-model="Cpnform.mngLnkPhn"></el-input>
        </el-form-item>
        <el-form-item label="商户类别" prop="mngMhTyp">
          <el-select v-model="Cpnform.mngMhTyp" placeholder="请选择">
            <el-option
              v-for="item in mngMhTypoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
    </div>
    <div class="infocontent_line">
      <div class="pcd">
        <el-form-item label="经营地址" prop="mngPrv">
          <el-select
            v-model="Cpnform.mngPrv"
            filterable
            clearable
            placeholder="请选择省份"
            @change="PrvChangeFn($event)"
          >
            <el-option
              v-for="item in this.provinceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select
            v-model="Cpnform.mngCty"
            filterable
            clearable
            placeholder="请选择城市"
            @change="CtyChangeFn($event)"
          >
            <el-option
              v-for="item in this.cityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select
            v-model="Cpnform.mngDit"
            filterable
            clearable
            placeholder="请选择区县"
          >
            <el-option
              v-for="item in this.districtOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" class="mngaddr" prop="mngAdr">
          <el-input v-model="Cpnform.mngAdr"></el-input>
        </el-form-item>
      </div>
    </div>
    <div class="cpninfopic">
      <div class="infocontent_line">
        <el-form-item label="内景照片" prop="indoorpic_Url">
          <el-upload
            class="avatar-uploader"
            :action="this.EnclSurebaseurl"
            :show-file-list="false"
            :on-success="Indoorpic_Success"
          >
            <img
              v-if="
                Cpnform.indoorpic_Url != '' &&
                Cpnform.indoorpic_Url != null &&
                Cpnform.indoorpic_Url != undefined
              "
              width="40"
              height="40"
              :src="Cpnform.indoorpic_Url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="spanshowdiv">
          <span
            class="spanshow2"
            v-show="
              Cpnform.indoorpic_Url != '' &&
              Cpnform.indoorpic_Url != null &&
              Cpnform.indoorpic_Url != undefined
            "
            @click="shoubigimg(Cpnform.indoorpic_Url)"
            >查看大图</span
          >
        </div>
        </el-form-item>
        
        <el-form-item label="门头照" prop="shopentrancepic_Url">
          <el-upload
            class="avatar-uploader"
            :action="this.EnclSurebaseurl"
            :show-file-list="false"
            :on-success="Shopentrancepic_Success"
          >
            <img
              v-if="
                Cpnform.shopentrancepic_Url != '' &&
                Cpnform.shopentrancepic_Url != null &&
                Cpnform.shopentrancepic_Url != undefined
              "
              width="40"
              height="40"
              :src="Cpnform.shopentrancepic_Url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="spanshowdiv">
            <span
              class="spanshow2"
              v-show="
                Cpnform.shopentrancepic_Url != '' &&
                Cpnform.shopentrancepic_Url != null &&
                Cpnform.shopentrancepic_Url != undefined
              "
              @click="shoubigimg(Cpnform.shopentrancepic_Url)"
              >查看大图</span
            >
          </div>
        </el-form-item>
        <el-form-item label="经营场所-喊收银台">
          <el-upload
            class="avatar-uploader"
            :action="this.EnclSurebaseurl"
            :show-file-list="false"
            :on-success="Placebusiness_Success"
          >
            <img
              v-if="
                Cpnform.placebusiness_Url != '' &&
                Cpnform.placebusiness_Url != null &&
                Cpnform.placebusiness_Url != undefined
              "
              width="40"
              height="40"
              :src="Cpnform.placebusiness_Url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="spanshowdiv">
            <span
              class="spanshow2"
              v-show="
                Cpnform.placebusiness_Url != '' &&
                Cpnform.placebusiness_Url != null &&
                Cpnform.placebusiness_Url != undefined
              "
              @click="shoubigimg(Cpnform.placebusiness_Url)"
              >查看大图</span
            >
          </div>
        </el-form-item>
        <el-form-item label="商户协议照片">
          <el-upload
            class="avatar-uploader"
            :action="this.EnclSurebaseurl"
            :show-file-list="false"
            :on-success="Merchantagr_Success"
          >
            <img
              v-if="
                Cpnform.merchantagr_Url != '' &&
                Cpnform.merchantagr_Url != null &&
                Cpnform.merchantagr_Url != undefined
              "
              width="40"
              height="40"
              :src="Cpnform.merchantagr_Url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="spanshowdiv">
            <span
              class="spanshow2"
              v-show="
                Cpnform.merchantagr_Url != '' &&
                Cpnform.merchantagr_Url != null &&
                Cpnform.merchantagr_Url != undefined
              "
              @click="shoubigimg(Cpnform.merchantagr_Url)"
              >查看大图</span
            >
          </div>
        </el-form-item>
        <el-form-item label="租赁协议-(封面)">
          <el-upload
            class="avatar-uploader"
            :action="this.EnclSurebaseurl"
            :show-file-list="false"
            :on-success="Leaseagrheaderr_Success"
          >
            <img
              v-if="
                Cpnform.leaseagrheader_Url != '' &&
                Cpnform.leaseagrheader_Url != null &&
                Cpnform.leaseagrheader_Url != undefined
              "
              width="40"
              height="40"
              :src="Cpnform.leaseagrheader_Url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="spanshowdiv">
            <span
              class="spanshow2"
              v-show="
                Cpnform.leaseagrheader_Url != '' &&
                Cpnform.leaseagrheader_Url != null &&
                Cpnform.leaseagrheader_Url != undefined
              "
              @click="shoubigimg(Cpnform.leaseagrheader_Url)"
              >查看大图</span
            >
          </div>
        </el-form-item>
        <el-form-item label="租赁协议二（面积、有效期页）">
          <el-upload
            class="avatar-uploader"
            :action="this.EnclSurebaseurl"
            :show-file-list="false"
            :on-success="Leaseagrarea_Success"
          >
            <img
              v-if="
                Cpnform.leaseagrarea_Url != '' &&
                Cpnform.leaseagrarea_Url != null &&
                Cpnform.leaseagrarea_Url != undefined
              "
              width="40"
              height="40"
              :src="Cpnform.leaseagrarea_Url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="spanshowdiv">
            <span
              class="spanshow2"
              v-show="
                Cpnform.leaseagrarea_Url != '' &&
                Cpnform.leaseagrarea_Url != null &&
                Cpnform.leaseagrarea_Url != undefined
              "
              @click="shoubigimg(Cpnform.leaseagrarea_Url)"
              >查看大图</span
            >
          </div>
        </el-form-item>
      </div>

      <div class="infocontent_line">
        <el-form-item label="租赁协议三（签章页）">
          <el-upload
            class="avatar-uploader"
            :action="this.EnclSurebaseurl"
            :show-file-list="false"
            :on-success="Leaseagrsign_Success"
          >
            <img
              v-if="
                Cpnform.leaseagrsign_Url != '' &&
                Cpnform.leaseagrsign_Url != null &&
                Cpnform.leaseagrsign_Url != undefined
              "
              width="40"
              height="40"
              :src="Cpnform.leaseagrsign_Url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="spanshowdiv">
            <span
              class="spanshow2"
              v-show="
                Cpnform.leaseagrsign_Url != '' &&
                Cpnform.leaseagrsign_Url != null &&
                Cpnform.leaseagrsign_Url != undefined
              "
              @click="shoubigimg(Cpnform.leaseagrsign_Url)"
              >查看大图</span
            >
          </div>
        </el-form-item>
        <el-form-item label="其他资料照片1">
          <el-upload
            class="avatar-uploader"
            :action="this.EnclSurebaseurl"
            :show-file-list="false"
            :on-success="OtherPic1_Success"
          >
            <img
              v-if="
                Cpnform.otherPic1_Url != '' &&
                Cpnform.otherPic1_Url != null &&
                Cpnform.otherPic1_Url != undefined
              "
              width="40"
              height="40"
              :src="Cpnform.otherPic1_Url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="spanshowdiv">
            <span
              class="spanshow2"
              v-show="
                Cpnform.otherPic1_Url != '' &&
                Cpnform.otherPic1_Url != null &&
                Cpnform.otherPic1_Url != undefined
              "
              @click="shoubigimg(Cpnform.otherPic1_Url)"
              >查看大图</span
            >
          </div>
        </el-form-item>
        <el-form-item label="其他资料照片2">
          <el-upload
            class="avatar-uploader"
            :action="this.EnclSurebaseurl"
            :show-file-list="false"
            :on-success="OtherPic2_Success"
          >
            <img
              v-if="
                Cpnform.otherPic2_Url != '' &&
                Cpnform.otherPic2_Url != null &&
                Cpnform.otherPic2_Url != undefined
              "
              width="40"
              height="40"
              :src="Cpnform.otherPic2_Url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="spanshowdiv">
            <span
              class="spanshow2"
              v-show="
                Cpnform.otherPic2_Url != '' &&
                Cpnform.otherPic2_Url != null &&
                Cpnform.otherPic2_Url != undefined
              "
              @click="shoubigimg(Cpnform.otherPic2_Url)"
              >查看大图</span
            >
          </div>
        </el-form-item>
        <el-form-item label="其他资料照片3">
          <el-upload
            class="avatar-uploader"
            :action="this.EnclSurebaseurl"
            :show-file-list="false"
            :on-success="OtherPic3_Success"
          >
            <img
              v-if="
                Cpnform.otherPic3_Url != '' &&
                Cpnform.otherPic3_Url != null &&
                Cpnform.otherPic3_Url != undefined
              "
              width="40"
              height="40"
              :src="Cpnform.otherPic3_Url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="spanshowdiv">
            <span
              class="spanshow2"
              v-show="
                Cpnform.otherPic3_Url != '' &&
                Cpnform.otherPic3_Url != null &&
                Cpnform.otherPic3_Url != undefined
              "
              @click="shoubigimg(Cpnform.otherPic3_Url)"
              >查看大图</span
            >
          </div>
        </el-form-item>
        <el-form-item label="其他资料照片4">
          <el-upload
            class="avatar-uploader"
            :action="this.EnclSurebaseurl"
            :show-file-list="false"
            :on-success="OtherPic4_Success"
          >
            <img
              v-if="
                Cpnform.otherPic4_Url != '' &&
                Cpnform.otherPic4_Url != null &&
                Cpnform.otherPic4_Url != undefined
              "
              width="40"
              height="40"
              :src="Cpnform.otherPic4_Url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="spanshowdiv">
            <span
              class="spanshow2"
              v-show="
                Cpnform.otherPic4_Url != '' &&
                Cpnform.otherPic4_Url != null &&
                Cpnform.otherPic4_Url != undefined
              "
              @click="shoubigimg(Cpnform.otherPic4_Url)"
              >查看大图</span
            >
          </div>
        </el-form-item>
        <el-form-item label="其他资料照片5">
          <el-upload
            class="avatar-uploader"
            :action="this.EnclSurebaseurl"
            :show-file-list="false"
            :on-success="OtherPic5_Success"
          >
            <img
              v-if="
                Cpnform.otherPic5_Url != '' &&
                Cpnform.otherPic5_Url != null &&
                Cpnform.otherPic5_Url != undefined
              "
              width="40"
              height="40"
              :src="Cpnform.otherPic5_Url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="spanshowdiv">
            <span
              class="spanshow2"
              v-show="
                Cpnform.otherPic5_Url != '' &&
                Cpnform.otherPic5_Url != null &&
                Cpnform.otherPic5_Url != undefined
              "
              @click="shoubigimg(Cpnform.otherPic5_Url)"
              >查看大图</span
            >
          </div>
        </el-form-item>
      </div>
      <!--
          <div
        :class="{ divshow: IsShow, divnone: !IsShow }"
        class="infocontent_line"
      >
        <el-form-item label="门店上传">
          <upload-excel-component
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            style="position: relative; top: -45px; left: 50px"
          />
        </el-form-item>
        <el-table
          :data="tableData"
          border
          highlight-current-row
          style="width: 100%; margin-top: -40px; height: 200px; overflow: auto"
        >
          <el-table-column
            v-for="item of tableHeader"
            :key="item"
            :prop="item"
            :label="item"
          />
        </el-table>
      </div>
      -->
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { AjaxToken, TipConfirm } from "@/api/common";
import { SelectAjax } from "@/api/common";
import { Jurisdiction } from "@/api/common";
import sessionStorage from "@/api/Storage";
import commconfig from "@/comm.json";
import UploadExcelComponent from "@/components/UploadExcel/index.vue";
import "url-search-params-polyfill";
export default {
  props: {
    Cpnform: null,
    IsShow: true,
  },
  components: { UploadExcelComponent },
  data() {
    return {
      chart: null,
      fileList: [],
      EnclSurebaseurl: "",
      provinceOptions: [],
      tableData: [],
      tableHeader: [],
      cityOptions: [],
      districtOptions: [],
      mngMhTypoptions: [
        {
          value: 0,
          label: "生活百货/超市(非平台类)",
        },
        {
          value: 1,
          label: "餐饮/美食(非平台类)",
        },
      ],
    };
  },
  watch: {
    Cpnform: {
      deep: true,
      handler(val) {
        backstage.GetProvinceListItems(this);
        backstage.GetCityListItems(this);
        backstage.GetDistrictListItems(this);
      },
    },
  },
  mounted() {},
  created() {
    this.EnclSurebaseurl = commconfig.baseapi + "UploadFileAttch";
  },
  methods: {
    shoubigimg(url) {
      this.Cpnform.showbigdialogVisible = true;
      this.Cpnform.showbigurl = url;
    },
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (isLt1M) {
        return true;
      }
      this.$message({
        message: "请不要上传大于1m的文件",
        type: "warning",
      });
      return false;
    },
    handleSuccess({ results, header }) {
      this.tableData = results;
      this.tableHeader = header;
      this.Cpnform.tableData = results;
      this.Cpnform.tableHeader = header;
      this.$message({
        showClose: true,
        message: "上传成功",
        type: "success",
      });
    },
    PrvChangeFn(e) {
      backstage.GetCityListItems(this);
    },
    CtyChangeFn(e) {
      backstage.GetDistrictListItems(this);
    },
    FileError(err, file, fileList) {},
    Indoorpic_Success(res, file) {
      //内景照
      this.Cpnform.indoorpic_Url = JSON.parse(res.data)[file.name];
      backstage.EnclsureHand(this, "Indoorpic", res, file);
    },
    Shopentrancepic_Success(res, file) {
      //门头照
      this.Cpnform.shopentrancepic_Url = JSON.parse(res.data)[file.name];
      backstage.EnclsureHand(this, "Shopentrancepic", res, file);
    },
    Placebusiness_Success(res, file) {
      //经营场所-含收银台
      this.Cpnform.placebusiness_Url = JSON.parse(res.data)[file.name];
      backstage.EnclsureHand(this, " Placebusiness", res, file);
    },
    Merchantagr_Success(res, file) {
      //商户协议
      this.Cpnform.merchantagr_Url = JSON.parse(res.data)[file.name];
      backstage.EnclsureHand(this, "Merchantagr", res, file);
    },
    Leaseagrheaderr_Success(res, file) {
      //租赁协议(封面)
      this.Cpnform.leaseagrheader_Url = JSON.parse(res.data)[file.name];
      backstage.EnclsureHand(this, "Leaseagrheader", res, file);
    },
    Leaseagrarea_Success(res, file) {
      //租赁协议二(面积有效页)
      this.Cpnform.leaseagrarea_Url = JSON.parse(res.data)[file.name];
      backstage.EnclsureHand(this, "Leaseagrarea", res, file);
    },
    Leaseagrsign_Success(res, file) {
      //租赁协议三(签章页)
      this.Cpnform.leaseagrsign_Url = JSON.parse(res.data)[file.name];
      backstage.EnclsureHand(this, "Leaseagrsign", res, file);
    },
    OtherPic1_Success(res, file) {
      //其他资料1
      this.Cpnform.otherPic1_Url = JSON.parse(res.data)[file.name];
      backstage.EnclsureHand(this, "OtherPic1", res, file);
    },
    OtherPic2_Success(res, file) {
      //其他资料2
      this.Cpnform.otherPic2_Url = JSON.parse(res.data)[file.name];
      backstage.EnclsureHand(this, "OtherPic2", res, file);
    },
    OtherPic3_Success(res, file) {
      //其他资料3
      this.Cpnform.otherPic3_Url = JSON.parse(res.data)[file.name];
      backstage.EnclsureHand(this, "OtherPic3", res, file);
    },
    OtherPic4_Success(res, file) {
      //其他资料4
      this.Cpnform.otherPic4_Url = JSON.parse(res.data)[file.name];
      backstage.EnclsureHand(this, "OtherPic4", res, file);
    },
    OtherPic5_Success(res, file) {
      //其他资料5
      this.Cpnform.otherPic5_Url = JSON.parse(res.data)[file.name];
      backstage.EnclsureHand(this, "OtherPic5", res, file);
    },
  },
};
var backstage = {
  EnclsureHand: function (thisobj, key, res, file, fileurl) {
    var ispush = true;
    var fileurl = JSON.parse(res.data)[file.name];
    thisobj.Cpnform.cpnenclsures.forEach((a) => {
      if (a.key == key) {
        ispush = false;
        a.name = file.name;
        a.uid = file.uid;
        a.data = file.response.data;
        a.fileurl = fileurl;
      }
    });
    if (ispush) {
      thisobj.Cpnform.cpnenclsures.push({
        key: key,
        name: file.name,
        uid: file.uid,
        fileurl: fileurl,
      });
    }
  },
  GetProvinceListItems: function (thisobj) {
    SelectAjax(
      "GetProvince?isEmpty=false&provinceId=" + thisobj.Cpnform.mngPrv + "",
      function (response) {
        var body = response.data;
        thisobj.provinceOptions = [];
        body.data.forEach((element) => {
          thisobj.provinceOptions.push({
            value: element.value,
            label: element.text,
          });
        });
      },
      function (error) {}
    );
  },
  GetCityListItems: function (thisobj) {
    SelectAjax(
      "GetCity?isEmpty=false&provinceId=" +
        thisobj.Cpnform.mngPrv +
        "&cityId=" +
        thisobj.Cpnform.mngCty +
        "",
      function (response) {
        var body = response.data;
        thisobj.cityOptions = [];
        body.data.forEach((element) => {
          thisobj.cityOptions.push({
            value: element.value,
            label: element.text,
          });
        });
      },
      function (error) {}
    );
  },
  GetDistrictListItems: function (thisobj) {
    SelectAjax(
      "GetDistrict?isEmpty=false&cityId=" +
        thisobj.Cpnform.mngCty +
        "&districtId=" +
        thisobj.Cpnform.mngDit +
        "",
      function (response) {
        var body = response.data;
        thisobj.districtOptions = [];
        body.data.forEach((element) => {
          thisobj.districtOptions.push({
            value: element.value,
            label: element.text,
          });
        });
      },
      function (error) {}
    );
  },
};
</script>
<style lang="scss" scoped>
.spanshowdiv {
  position: absolute;
}
.spanshow2 {
  position: relative;
  top: -80px;
  left: 104px;
  color: #3b5daf;
  cursor: pointer;
}
</style>
